<template>
	<view>
		<!-- 顶部导航区域 -->
		    <view class="smart-page-head">
		      <view class="smart-page-head-title">swiper 滑块视图</view>
		    </view>
		    <!-- 轮播图区域 -->
		    <view class="smart-padding-wrap">
		      <swiper circular indicator-dots :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
		        <swiper-item>
		          <view class="swiper-item smart-bg-blue">A</view>
		        </swiper-item>
		        <swiper-item>
		          <view class="swiper-item smart-bg-blue">A</view>
		        </swiper-item>
		        <swiper-item>
		          <view class="swiper-item smart-bg-green">B</view>
		        </swiper-item>
		        <swiper-item>
		          <view class="swiper-item smart-bg-red">C</view>
		        </swiper-item>
		      </swiper>
		    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true, // 显示指示器
				      autoplay: true, // 自动播放
				      interval: 1000, // 切换时间间隔
				      duration: 500 // 动画持续时间
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
